import React from 'react';
import ProTable from '@ant-design/pro-table';
import { Button, Popconfirm, Radio } from 'antd';
import { connect } from 'umi';

const Table = ({ informationOpen, openAddInfoOpenModal, openInfoOpenDetailModal, dispatch }) => {
  const { tableRef } = informationOpen;

  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',
      align: 'center',
      fixed: 'left',
      width: 64,
    },
    {
      title: '类型',
      align: 'center',
      dataIndex: 'type',
      valueEnum: {
        POLICY_GUIDE: { text: '政策指南' },
        LEGAL_DYNAMIC: { text: '法务动态' },
        INTERNATIONAL_NEWS: { text: '国际要闻' },
        ANNOUNCEMENT: { text: '通知公告' },
      },
    },
    { title: '标题', align: 'center', dataIndex: 'title' },
    { title: '信息发布人', align: 'center', dataIndex: 'publishBy' },

    {
      title: '发布时间',
      valueType: 'dateRange',
      align: 'center',
      dataIndex: 'searchTime',
      hideInTable: true,
    },
    {
      title: '发布时间',
      valueType: 'dateTime',
      align: 'center',
      dataIndex: 'publishTime',
      hideInSearch: true,
      render: (dom, roleData) => (
        <>
          <span>{roleData.publishTime.split(' ')[0]}</span>
        </>
      ),
    },
    {
      title: '操作',
      valueType: 'option',
      align: 'center',
      dataIndex: 'id',
      width: 180,
      fixed: 'right',
      render: (dom, data) => [
        <a key={`${data.id}detail`} onClick={() => openInfoOpenDetailModal(data.id)}>
          预览
        </a>,
        <a key={`${data.id}updata`} onClick={() => openAddInfoOpenModal(data.id)}>
          编辑
        </a>,
        <Popconfirm
          key={`${data.id}del`}
          title="确认删除该信息吗？"
          placement="topRight"
          onConfirm={() => deleteInfo(data.id)}
        >
          <a>删除</a>
        </Popconfirm>,
      ],
    },
    {
      title: '标签',
      valueType: 'option',
      align: 'center',
      dataIndex: 'id',
      tip:
        '1.置顶（标签功能在信息列表页面置顶显示）2.首页显示（标签功能为在用户侧网站首页显示该条信息）3.简介显示（标签功能为在法务区简介内容里面显示该条信息）',
      width: 300,
      fixed: 'right',
      render: (dom, data) => [
        <Popconfirm
          key={`${data.id}isTop`}
          title={`确认${data.isTop === 'YES' ? '取消置顶' : '置顶'}？`}
          placement="topRight"
          onConfirm={() => infoIsTop(data.id, data.isTop)}
        >
          <Radio checked={data.isTop === 'YES'}>置顶</Radio>
        </Popconfirm>,
        <Popconfirm
          key={`${data.id}isHomepage`}
          title={`确认${data.isHomepage === 'YES' ? '取消首页显示' : '首页显示'}？`}
          placement="topRight"
          onConfirm={() => isHomepage(data.id, data.isHomepage)}
        >
          <Radio checked={data.isHomepage === 'YES'}>首页显示</Radio>
        </Popconfirm>,
        <Popconfirm
          key={`${data.id}isLegalDistrict`}
          title={`确认${data.isLegalDistrict === 'YES' ? '取消简介显示' : '简介显示'}？`}
          placement="topRight"
          onConfirm={() => isLegalDistrict(data.id, data.isLegalDistrict)}
        >
          <Radio checked={data.isLegalDistrict === 'YES'}>简介显示</Radio>
        </Popconfirm>,
      ],
    },
  ];

  const getList = params =>
    new Promise(resolve => {
      dispatch({
        type: 'informationOpen/getInfoOpenList',
        payload: { ...params },
        resolve,
      });
    });

  const deleteInfo = id => {
    dispatch({
      type: 'informationOpen/deleteInfoOpen',
      payload: {
        id,
      },
    });
  };
  const infoIsTop = (id, isTop) => {
    dispatch({
      type: 'informationOpen/infoIsTop',
      payload: {
        id,
        isTop: isTop === 'YES' ? 'NO' : 'YES',
      },
    });
  };
  const isHomepage = (id, isHomepageTemp) => {
    dispatch({
      type: 'informationOpen/isHomepage',
      payload: {
        id,
        isHomepage: isHomepageTemp === 'YES' ? 'NO' : 'YES',
      },
    });
  };
  const isLegalDistrict = (id, isLegalDistrictTemp) => {
    dispatch({
      type: 'informationOpen/isLegalDistrict',
      payload: {
        id,
        isLegal: isLegalDistrictTemp === 'YES' ? 'NO' : 'YES',
      },
    });
  };

  return (
    <ProTable
      headerTitle="已发布信息公开"
      rowKey="id"
      actionRef={tableRef}
      scroll={{ x: 'max-content' }}
      request={async params => getList(params)}
      columns={columns}
      toolBarRender={_ => [
        <Button
          type="primary"
          onClick={() => {
            openAddInfoOpenModal();
          }}
        >
          创建新信息
        </Button>,
      ]}
    />
  );
};

export default connect(({ informationOpen }) => ({
  informationOpen,
}))(Table);
